<template>
	<view class="container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>

		<!-- 标题栏 -->
		<view class="header">
			<!-- 返回按钮 -->
			<text @tap="goBack" class="back-icon">←</text>
			
			<!-- 标题 -->
			<text class="title-text">古庙修缮保护计划</text>
			
			<view class="header-placeholder"></view>
		</view>
		
		<!-- 表单内容 -->
		<scroll-view scroll-y class="form-scroll">
			<view class="form-container">
				<!-- 表单介绍卡片 -->
				<view class="form-intro">
					<view class="intro-decoration">
						<view class="decoration-line"></view>
						<view class="decoration-icon">
							<!-- uniapp图标 -->
                             <!-- 调整颜色 -->
                            <uni-icons type="star" size="20" color="#6A4C29"></uni-icons>
						</view>
						<view class="decoration-line"></view>
					</view>
					<text class="intro-title">古庙入驻与修缮保护计划</text>
					<text class="intro-desc">为传承千年禅宗文化，保护古庙文化遗产，天禅境特推出古庙修缮保护计划。欢迎提交您所知的需要保护的古庙信息。</text>
					
					<view class="intro-stats">
						<view class="stat-item">
							<text class="stat-number">126</text>
							<text class="stat-label">已保护古庙</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item">
							<text class="stat-number">58</text>
							<text class="stat-label">进行中项目</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-item">
							<text class="stat-number">3.2万</text>
							<text class="stat-label">参与人次</text>
						</view>
					</view>
				</view>
				
				<!-- 表单区域 -->
				<view class="form-card">
					<view class="form-section-title">
						<text class="section-icon uni-icons" :class="'uniui-paperplane'"></text>
						<text>基本信息</text>
					</view>
					
					<view class="form-item">
						<text class="form-label">古庙名称<text class="required">*</text></text>
						<input class="form-input" type="text" v-model="formData.name" placeholder="请输入古庙名称" />
					</view>
					
					<view class="form-item location-item">
						<text class="form-label">地理位置<text class="required">*</text></text>
						
						<view class="location-preview" v-if="formData.location" @tap="chooseLocation">
							<view class="location-info">
								<text class="location-address">{{formData.location}}</text>
								<text class="location-coordinates" v-if="formData.coordinates">{{formData.coordinates}}</text>
							</view>
							
						</view>
						
						<view class="location-empty" v-else @tap="chooseLocation">
							<!-- uniapp图标 -->
							<text class="location-empty-text">点击从地图选择位置</text>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">备注说明</text>
						<textarea class="form-textarea" v-model="formData.remarks" placeholder="请描述古庙历史、现状、保护需求等信息" />
						<view class="textarea-counter">{{formData.remarks.length}}/200</view>
					</view>
					
					<view class="form-section-title">
						<text class="section-icon uni-icons" :class="'uniui-person'"></text>
						<text>联系方式</text>
					</view>
					
					<view class="form-item">
						<text class="form-label">联系人<text class="required">*</text></text>
						<input class="form-input" type="text" v-model="formData.contact" placeholder="请输入联系人姓名" />
					</view>
					
					<view class="form-item">
						<text class="form-label">联系电话<text class="required">*</text></text>
						<input class="form-input" type="number" v-model="formData.phone" placeholder="请输入联系电话" />
					</view>
					
					<view class="form-section-title">
						<text class="section-icon uni-icons" :class="'uniui-image'"></text>
						<text>古庙照片</text>
					</view>
					
					<view class="form-item">
						<text class="form-label-tip">请上传古庙照片，最多9张，清晰照片有助于我们更好地评估</text>
						<view class="image-uploader">
							<view class="image-list">
								<view 
									class="image-item" 
									v-for="(item, index) in formData.images" 
									:key="index"
									@tap="previewImage(index)"
								>
									<image :src="item" mode="aspectFill"></image>
									<view class="delete-icon" @tap.stop="deleteImage(index)">
										<text class="close-icon">×</text>
									</view>
								</view>
								
								<view class="upload-button" @tap="chooseImage" v-if="formData.images.length < 9">
									<text class="plus-icon">+</text>
									<text class="upload-text">添加图片</text>
									<text class="upload-count">{{formData.images.length}}/9</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">提交人</text>
						<input class="form-input" type="text" v-model="formData.submitter" placeholder="请输入您的姓名（选填）" />
					</view>
				</view>
				
				<view class="agreement">
					<checkbox :checked="agreed" @tap="toggleAgreement" color="#8B6E42" />
					<text class="agreement-text">我已阅读并同意<text class="link-text" @tap="showAgreement">《古庙保护计划条款》</text></text>
				</view>
				
				<button class="submit-button" :disabled="!canSubmit" @tap="submitForm">
					<text class="button-text">提交申请</text>
				</button>
				
				<view class="form-footer">
					<text class="footer-text">天禅境古庙保护计划 · 传承千年禅宗文化</text>
				</view>
			</view>
		</scroll-view>

		<!-- 添加自定义协议弹窗 -->
		<view class="agreement-popup" v-if="showAgreementPopup">
			<view class="agreement-popup-mask" @tap="hideAgreement"></view>
			<view class="agreement-popup-content">
				<view class="agreement-popup-header">
					<text class="agreement-popup-title">古庙保护计划条款</text>
					<text class="agreement-popup-close" @tap="hideAgreement">×</text>
				</view>
				<scroll-view scroll-y class="agreement-popup-body">
					<view class="agreement-section">
						<text class="agreement-section-title">一、总则</text>
						<text class="agreement-section-content">本计划旨在保护和修缮具有历史文化价值的古庙建筑，传承千年禅宗文化，守护中华文明瑰宝。</text>
					</view>
					
					<view class="agreement-section">
						<text class="agreement-section-title">二、信息使用</text>
						<text class="agreement-section-content">提交的信息将用于评估古庙保护需求，我们会对您的个人信息严格保密，不会用于商业用途或向第三方泄露。</text>
					</view>
					
					<view class="agreement-section">
						<text class="agreement-section-title">三、实施流程</text>
						<text class="agreement-section-content">1. 信息收集：通过本表单收集古庙基本信息和保护需求</text>
						<text class="agreement-section-content">2. 需求评估：专业团队评估保护价值和紧急程度</text>
						<text class="agreement-section-content">3. 方案制定：根据评估结果制定保护修缮方案</text>
						<text class="agreement-section-content">4. 联系确认：与提交人联系确认方案细节</text>
						<text class="agreement-section-content">5. 实施保护：按计划实施保护修缮工作</text>
					</view>
					
					<view class="agreement-section">
						<text class="agreement-section-title">四、权利与义务</text>
						<text class="agreement-section-content">天禅境负责组织专业力量进行古庙保护工作，提交人应保证所提供信息的真实性和准确性。</text>
					</view>
					
					<view class="agreement-section">
						<text class="agreement-section-title">五、其他</text>
						<text class="agreement-section-content">天禅境保留对保护计划的最终解释权。如有疑问，请联系客服热线：400-888-7788。</text>
					</view>
				</scroll-view>
				<view class="agreement-popup-footer">
					<button class="agreement-popup-btn" @tap="agreeAndClose">我已阅读并同意</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: '',
				location: '',
				coordinates: '',
				remarks: '',
				contact: '',
				phone: '',
				images: [],
				submitter: ''
			},
			agreed: false,
			showAgreementPopup: false
		}
	},
	computed: {
		canSubmit() {
			return this.formData.name && 
				this.formData.location && 
				this.formData.contact && 
				this.formData.phone && 
				this.agreed;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		chooseLocation() {
			uni.chooseLocation({
				success: (res) => {
					this.formData.location = res.address;
					this.formData.coordinates = `${res.latitude.toFixed(6)}, ${res.longitude.toFixed(6)}`;
				}
			});
		},
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.formData.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData.images = [...this.formData.images, ...res.tempFilePaths];
				}
			});
		},
		deleteImage(index) {
			this.formData.images.splice(index, 1);
		},
		previewImage(index) {
			uni.previewImage({
				urls: this.formData.images,
				current: this.formData.images[index]
			});
		},
		toggleAgreement() {
			this.agreed = !this.agreed;
		},
		showAgreement() {
			this.showAgreementPopup = true;
		},
		hideAgreement() {
			this.showAgreementPopup = false;
		},
		agreeAndClose() {
			this.agreed = true;
			this.hideAgreement();
		},
		submitForm() {
			if (!this.canSubmit) {
				return;
			}
			
			uni.showLoading({
				title: '提交中...'
			});
			
			// 模拟提交
			setTimeout(() => {
				uni.hideLoading();
				
				uni.showModal({
					title: '提交成功',
					content: '感谢您为古庙保护计划提供信息，我们将尽快审核并与您联系。',
					showCancel: false,
					success: () => {
						uni.navigateBack();
					}
				});
			}, 1500);
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F2ED;
	font-family: "思源宋体", "Source Han Serif", serif;
	color: #4A3520;
}

.container {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: linear-gradient(180deg, #E6DBC8 0%, rgba(230, 219, 200, 0.8) 100%);
	box-shadow: 0 4rpx 15rpx rgba(106, 76, 41, 0.15);
	position: relative;
	z-index: 10;

	.uni-icons {
		font-size: 42rpx;
		color: #6A4C29;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.title-text {
	font-family: "汉仪行楷", "思源宋体", serif;
	font-size: 38rpx;
	color: #5D3F1C;
	text-align: center;
	font-weight: 600;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
	flex: 1;
}

.header-placeholder {
	width: 60rpx;
}

.form-scroll {
	flex: 1;
	height: 0;
}

.form-container {
	padding: 10rpx 10rpx;
}

.form-intro {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(165, 136, 85, 0.1);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 8rpx;
		background: linear-gradient(90deg, #D5BC8F, #A58855);
	}
}

.intro-decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25rpx;
}

.decoration-line {
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, rgba(165, 136, 85, 0.3), transparent);
}

.decoration-icon {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	background-color: #F9F6F1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20rpx;
	border: 1px solid rgba(165, 136, 85, 0.2);
	
	.uni-icons {
		font-size: 36rpx;
		color: #8B6E42;
	}
}

.intro-title {
	font-family: "汉仪行楷", "思源宋体", serif;
	font-size: 34rpx;
	color: #6A4C29;
	display: block;
	margin-bottom: 20rpx;
	text-align: center;
	font-weight: 600;
	letter-spacing: 2rpx;
}

.intro-desc {
	font-size: 28rpx;
	color: #7A6245;
	line-height: 1.7;
	text-align: justify;
}

.intro-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
	padding-top: 25rpx;
	border-top: 1px dashed rgba(165, 136, 85, 0.3);
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 36rpx;
	color: #8B6E42;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #9C8A73;
}

.stat-divider {
	width: 1px;
	height: 50rpx;
	background-color: rgba(165, 136, 85, 0.2);
}

.form-card {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(165, 136, 85, 0.1);
	padding: 10rpx 0;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.form-section-title {
	padding: 25rpx 30rpx 15rpx;
	display: flex;
	align-items: center;
	color: #6A4C29;
	font-size: 30rpx;
	font-weight: 600;
	border-bottom: 1px solid rgba(165, 136, 85, 0.1);
	margin-bottom: 10rpx;
	
	.section-icon {
		font-size: 32rpx;
		margin-right: 12rpx;
		color: #A58855;
	}
}

.form-item {
	padding: 25rpx 30rpx;
	position: relative;
	
	&:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		height: 1px;
		background: linear-gradient(90deg, transparent, #EAE1D4, transparent);
	}
}

.form-label {
	font-size: 30rpx;
	color: #5D3F1C;
	margin-bottom: 18rpx;
	display: block;
	font-weight: 500;
}

.form-label-tip {
	font-size: 26rpx;
	color: #9C8A73;
	margin-bottom: 20rpx;
	display: block;
	line-height: 1.5;
}

.required {
	color: #D35D47;
	margin-left: 8rpx;
}

.form-input {
	width: 100%;
	height: 85rpx;
	background-color: #F9F6F1;
	border-radius: 12rpx;
	padding: 0 25rpx;
	font-size: 28rpx;
	color: #4A3520;
	border: 1rpx solid #EBE2D5;
	transition: all 0.3s;
	
	&:focus {
		background-color: #FFFFFF;
		border-color: #C8A675;
		box-shadow: 0 0 0 2rpx rgba(200, 166, 117, 0.2);
	}
}

.form-textarea {
	width: 100%;
	height: 220rpx;
	background-color: #F9F6F1;
	border-radius: 12rpx;
	padding: 25rpx;
	font-size: 28rpx;
	color: #4A3520;
	border: 1rpx solid #EBE2D5;
	transition: all 0.3s;
	
	&:focus {
		background-color: #FFFFFF;
		border-color: #C8A675;
		box-shadow: 0 0 0 2rpx rgba(200, 166, 117, 0.2);
	}
}

.textarea-counter {
	text-align: right;
	font-size: 24rpx;
	color: #9C8A73;
	margin-top: 10rpx;
}

.location-item {
	margin-bottom: 30rpx;
}

.location-empty {
	width: 100%;
	height: 100rpx;
	background-color: #F9F6F1;
	border-radius: 12rpx;
	border: 1rpx dashed #D5BC8F;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.uni-icons {
		font-size: 36rpx;
		color: #A58855;
		margin-right: 15rpx;
	}
}

.location-empty-text {
	font-size: 28rpx;
	color: #9C8A73;
}

.location-preview {
	width: 100%;
	background-color: #F9F6F1;
	border-radius: 12rpx;
	padding: 20rpx 25rpx;
	border: 1rpx solid #EBE2D5;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.location-info {
	flex: 1;
}

.location-address {
	font-size: 28rpx;
	color: #4A3520;
	display: block;
	margin-bottom: 8rpx;
}

.location-coordinates {
	font-size: 24rpx;
	color: #9C8A73;
	display: block;
}

.location-edit {
	font-size: 36rpx;
	color: #8B6E42;
	margin-left: 20rpx;
}

.image-uploader {
	margin-top: 20rpx;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
}

.image-item {
	width: 200rpx;
	height: 200rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	border: 1rpx solid #EBE2D5;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.delete-icon {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFF;
	font-size: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	border-radius: 50%;
}

.upload-button {
	width: 200rpx;
	height: 200rpx;
	background-color: #F9F6F1;
	border: 1px dashed #D5BC8F;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
	transition: all 0.3s;
	position: relative;
	
	&:active {
		background-color: #F0E9DD;
	}
	
	.uni-icons {
		font-size: 60rpx;
		color: #C8A675;
		margin-bottom: 12rpx;
	}
}

.upload-text {
	font-size: 26rpx;
	color: #9C8A73;
}

.upload-count {
	position: absolute;
	bottom: 15rpx;
	font-size: 22rpx;
	color: #A58855;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 30rpx 0;
	padding: 0 15rpx;
}

.agreement-text {
	font-size: 26rpx;
	color: #7A6245;
	margin-left: 15rpx;
	line-height: 1.5;
}

.link-text {
	color: #8B6E42;
	text-decoration: underline;
}

.submit-button {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #D5BC8F 0%, #A58855 100%);
	color: #FFF;
	font-size: 32rpx;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 20rpx rgba(165, 136, 85, 0.3);
	border: none;
	position: relative;
	overflow: hidden;
	
	&:active:not([disabled]) {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 10rpx rgba(165, 136, 85, 0.2);
	}
	
	&::after {
		border: none;
	}
	
	&[disabled] {
		background: linear-gradient(135deg, #D8CEBD 0%, #BBB2A1 100%);
		color: rgba(255, 255, 255, 0.8);
		box-shadow: none;
	}
	
	.button-text {
		position: relative;
		z-index: 1;
		letter-spacing: 4rpx;
		font-weight: 500;
	}
	
	&:not([disabled])::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: 0.5s;
	}
	
	&:not([disabled]):active::before {
		left: 100%;
	}
}

.form-footer {
	text-align: center;
	padding: 20rpx 0;
}

.footer-text {
	font-size: 24rpx;
	color: #9C8A73;
	letter-spacing: 1rpx;
}

/* 返回按钮 */
.back-icon {
	font-size: 42rpx;
	color: #6A4C29;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 地图图标 */
.map-icon {
	font-size: 36rpx;
	color: #8B6E42;
	margin-left: 20rpx;
}

/* 添加图标 */
.plus-icon {
	font-size: 60rpx;
	color: #C8A675;
	margin-bottom: 12rpx;
}

/* 关闭图标 */
.close-icon {
	font-size: 24rpx;
	color: #FFF;
}

/* 协议弹窗样式 */
.agreement-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

.agreement-popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
}

.agreement-popup-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFF;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.agreement-popup-header {
	padding: 30rpx;
	border-bottom: 1rpx solid rgba(165, 136, 85, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.agreement-popup-title {
	font-size: 34rpx;
	color: #4A3520;
	font-weight: bold;
	letter-spacing: 2rpx;
}

.agreement-popup-close {
	font-size: 40rpx;
	color: #9C8A73;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.agreement-popup-body {
	padding: 30rpx;
	max-height: 60vh;
}

.agreement-section {
	margin-bottom: 30rpx;
}

.agreement-section-title {
	font-size: 30rpx;
	color: #6A4C29;
	font-weight: bold;
	margin-bottom: 15rpx;
	display: block;
}

.agreement-section-content {
	font-size: 28rpx;
	color: #7A6245;
	line-height: 1.6;
	margin-bottom: 10rpx;
	display: block;
}

.agreement-popup-footer {
	padding: 20rpx 30rpx 50rpx;
	border-top: 1rpx solid rgba(165, 136, 85, 0.2);
}

.agreement-popup-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #D5BC8F 0%, #A58855 100%);
	color: #FFF;
	font-size: 32rpx;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	letter-spacing: 2rpx;
	
	&::after {
		border: none;
	}
	
	&:active {
		opacity: 0.9;
	}
}
</style>